<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ title | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-loading [hideUntil]="readyToCapture">
        <div class="core-av-wrapper">
            <!-- Video stream for image and video. -->
            <video [hidden]="hasCaptured" class="core-webcam-stream" autoplay #streamVideo></video>

            @if (isVideo) {
                <!-- For video recording, use 2 videos and show/hide them because a CSS rule caused problems with the controls. -->
                <video [hidden]="!hasCaptured" class="core-webcam-video-captured" controls #previewVideo controlsList="nodownload">
                </video>
            } @else {
                <!-- Canvas to treat the image and an img to show the result. -->
                <canvas class="core-webcam-image-canvas" #imgCanvas></canvas>
                <img [hidden]="!hasCaptured" class="core-webcam-image" alt="{{ 'core.capturedimage' | translate }}" #previewImage>
            }
        </div>
    </core-loading>
</ion-content>

@if (readyToCapture) {
    <ion-footer class="gray-with-border">
        <ion-row>
            @if (hasCaptured) {
                <ion-col class="ion-text-center">
                    <ion-button fill="clear" expand="block" (click)="discard()" [ariaLabel]="'core.discard' | translate">
                        <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true" color="danger" />
                    </ion-button>
                </ion-col>
                <ion-col class="ion-text-center">
                    <ion-button fill="clear" expand="block" (click)="done()" [ariaLabel]="'core.done' | translate">
                        <ion-icon name="fas-check" slot="icon-only" aria-hidden="true" />
                    </ion-button>
                </ion-col>
            } @else {
                <ion-col class="ion-text-start">
                    <ion-button fill="clear" (click)="cancel()" [ariaLabel]="'core.cancel' | translate">
                        <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
                    </ion-button>
                </ion-col>

                @if (isVideo) {
                    <ion-col class="ion-text-center">
                        <ion-button fill="clear" expand="block" (click)="actionClicked()" [ariaLabel]="title">
                            @if (isCapturing) {
                                <ion-icon name="fas-square" slot="icon-only" aria-hidden="true" />
                            } @else {
                                <ion-icon name="fas-video" slot="icon-only" aria-hidden="true" />
                            }
                        </ion-button>
                    </ion-col>
                    <ion-col class="ion-padding ion-text-end chrono-container">
                        <core-chrono [running]="isCapturing" [reset]="resetChrono" [endTime]="maxTime" (onEnd)="stopCapturing()" />
                    </ion-col>
                } @else {
                    <ion-col class="ion-text-center">
                        <ion-button fill="clear" expand="block" (click)="actionClicked()" [ariaLabel]="title">
                            <ion-icon name="fas-camera" slot="icon-only" aria-hidden="true" />
                        </ion-button>
                    </ion-col>
                    <ion-col />
                }
            }
        </ion-row>
    </ion-footer>
}
